<template>
  <view class="privacy-popup" v-if="isShowPopup" @touchmove.stop.prevent>
    <!-- mask -->
    <view class="privacy-popup-mask" @touchmove.stop.prevent />
    <!-- content -->
    <view class="privacy-popup-content">
      <!-- <view class="content-bg"></view> -->
      <image
        class="content-bg"
        mode="aspectFit"
        src="@/static/images/login/privacy-popup-bg.png"
      ></image>

      <text class="content-title">用户协议与隐私保护</text>

      <scroll-view
        class="content-scroll"
        ref="scrollview"
        scroll-y="true"
        enable-flex="true"
        scroll-with-animation="true"
      >
        <p>
          欢迎各位使用库课云！为了更好的保障您的个人权益，在您使用我们产品前，请务必审慎阅读
          <text class="href-text" @tap="clickToSGPrivacy('1')"
            >《用户协议》</text
          >
          与
          <text class="href-text" @tap="clickToSGPrivacy('2')"
            >《隐私政策》</text
          >
          ，以帮助您了解我们对您的个人信息处理情况以及您享有的相关权利。
        </p>
        <p>
          若您同意，即表示您已阅读并同意上述条款，请点击“同意”开始并接受我们的服务。
        </p>
        <p>若您点击不同意，将会退出小程序。</p>
      </scroll-view>

      <view class="content-footer">
        <button
          size="mini"
          id="agree-btn"
          class="agree-btn"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgree"
        >
          同意并继续
        </button>
        <button size="mini" class="refuse-btn" @tap="handleRefuse">
          不同意
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
import { getKKToken } from "@/utils/storageUtil";

defineProps({
  height: {
    type: String,
    default: "290rpx",
  },
});

const privacyContractName = ref("");
const isShowPopup = ref(false);
const privacyResolves = ref([]);

const canShowPrivacyDialog = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const path = currentPage.route;
  if (path !== "pagesA/login/index" && getKKToken()) {
    return true;
  }
  return false;
};

const currentPageIsTab = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const path = currentPage.route;
  if (path === "pages/index/index" || path === "pages/mine/index") {
    return true;
  }
};

const checkPrivacySetting = () => {
  // #ifdef MP-WEIXIN
  // 主动触发
  if (wx.getPrivacySetting) {
    wx.getPrivacySetting({
      success: (res) => {
        console.log(res);
        if (res.needAuthorization) {
          privacyContractName.va = res.privacyContractName;
          if (canShowPrivacyDialog()) {
            if (currentPageIsTab()) {
              uni.hideTabBar();
            }
            isShowPopup.value = true;
          }
        }
      },
      fail: () => {},
      complete: () => {},
    });
  }
  // 被动触发
  if (wx.onNeedPrivacyAuthorization) {
    wx.onNeedPrivacyAuthorization((resolve) => {
      privacyResolves.value.push(resolve);
      if (canShowPrivacyDialog()) {
        if (currentPageIsTab()) {
          uni.hideTabBar();
        }
        isShowPopup.value = true;
      }
    });
  }
  // #endif
};

const clickToSGPrivacy = (type: string) => {
  if (type === "1") {
    uni.navigateTo({
      url: "/pagesA/agreement/user",
    });
  } else if (type === "2") {
    uni.navigateTo({
      url: "/pagesA/agreement/privacy",
    });
  }
};
const handleAgree = () => {
  privacyResolves.value.forEach((resolve) => {
    resolve({
      event: "agree",
      buttonId: "agree-btn",
    });
  });
  privacyResolves.value = [];
  isShowPopup.value = false;
  if (currentPageIsTab()) {
    uni.showTabBar();
  }
};

const handleRefuse = () => {
  privacyResolves.value.forEach((resolve) => {
    resolve({
      event: "disagree",
    });
  });
  privacyResolves.value = [];
  uni.showToast({
    title: "需同意后才可继续使用库课云",
    icon: "none",
  });
};
onMounted(() => {
  checkPrivacySetting();
});
</script>

<style lang="scss" scoped>
.privacy-popup {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.privacy-popup-mask {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.privacy-popup-content {
  position: relative;
  z-index: 1;
  width: 600rpx;

  //   height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 845rpx;
  margin-bottom: 160rpx;

  .content-bg {
    position: absolute;
    border-radius: 16rpx;
    z-index: -1;
    top: 0rpx;
    left: 0rpx;
    width: 100%;
    height: 100%;
  }

  .content-title {
    height: 36rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    line-height: 36rpx;
    // margin-top: 50rpx;
    margin-top: 279rpx;
  }

  .content-scroll {
    width: 488rpx;
    height: 288rpx;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 36rpx;
    margin-top: 36rpx;
    color: #333333;

    .href-text {
      color: #386ef5;
      font-weight: 600;
    }
  }

  .content-footer {
    position: relative;
    margin-top: 50rpx;
    height: 166rpx;
    bottom: 0rpx;
    left: 0rpx;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .agree-btn {
      width: 454rpx;
      height: 70rpx;
      padding: 0rpx;
      margin: 0rpx;
      border: none;
      border-radius: 110rpx;
      background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);

      font-size: 28rpx;
      font-weight: 600;
      line-height: 70rpx;
      color: #ffffff;
    }
    .agree-btn:after {
      border: none;
    }

    .refuse-btn {
      height: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;
      line-height: 24rpx;
      margin-top: 24rpx;
      background: transparent;
    }
    .refuse-btn:after {
      border: none;
    }
  }
}
</style>
